<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-download" size="mini" @click="handleDownload" class="custom-download-btn">
          下载
        </el-button>
      </el-col>
      <el-col :span="3">
        <el-input v-model="searchKeyword" placeholder="请输入搜索关键词" clearable class="custom-input"></el-input>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" class="custom-search-btn">
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" class="custom-add-btn">
          新增
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="jueyzList" class="custom-table" border resizable>
      <el-table-column label="工区名称" prop="gqname" width="150"></el-table-column>
      <el-table-column label="站区名称" prop="zaname" width="150"></el-table-column>
      <el-table-column label="隧道名称" prop="sdname" width="150"></el-table-column>
      <el-table-column label="杆号" prop="ganhaos" width="120"></el-table-column>
      <el-table-column label="检修周期" prop="cycle" width="150"></el-table-column>
      <el-table-column label="检查日期" prop="mkdate" :formatter="formatDate" width="150"></el-table-column>
      <el-table-column label="维修前状态" prop="beforewx" width="200"></el-table-column>
      <el-table-column label="维修后状态" prop="afterwx" width="200"></el-table-column>
      <el-table-column label="遗留问题" prop="remainqs" width="180"></el-table-column>
      <el-table-column label="检查人" prop="checker" width="120"></el-table-column>
      <el-table-column label="负责人" prop="leader" width="120"></el-table-column>
      <el-table-column label="操作员" prop="oprator" width="120"></el-table-column>
      <el-table-column label="是否最后一次" prop="islast" width="120"></el-table-column>
      <el-table-column label="备注" prop="remark" width="250"></el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.row)" class="custom-edit-btn">
            编辑
          </el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)" class="custom-delete-btn">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total" class="custom-pagination">
    </el-pagination>

    <el-dialog :title="isEdit? '编辑绝缘子记录' : '新增绝缘子记录'" :visible.sync="dialogVisible" width="50%" class="custom-dialog">
      <el-form :model="form" :rules="rules" ref="form">
        <!-- 新增或编辑时也隐藏绝缘子ID编号、相关外键、隧道ID的表单项 -->
        <el-form-item label="工区名称" prop="gqname">
          <el-input v-model="form.gqname" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="站区名称" prop="zaname">
          <el-input v-model="form.zaname" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="隧道名称" prop="sdname">
          <el-input v-model="form.sdname" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="杆号" prop="ganhaos">
          <el-input v-model="form.ganhaos" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="检修周期" prop="cycle">
          <el-input v-model.number="form.cycle" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="检查日期" prop="mkdate">
          <el-date-picker v-model="form.mkdate" type="date" placeholder="选择检查日期" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" class="custom-datepicker"></el-date-picker>
        </el-form-item>
        <el-form-item label="维修前状态" prop="beforewx">
          <el-input v-model="form.beforewx" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="维修后状态" prop="afterwx">
          <el-input v-model="form.afterwx" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="遗留问题" prop="remainqs">
          <el-input v-model="form.remainqs" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="检查人" prop="checker">
          <el-input v-model="form.checker" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="form.leader" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="操作员" prop="oprator">
          <el-input v-model="form.oprator" class="custom-input"></el-input>
        </el-form-item>
        <el-form-item label="是否最后一次" prop="islast">
          <el-select v-model="form.islast" class="custom-select">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" class="custom-input"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="custom-cancel-btn">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm" class="custom-confirm-btn">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectAll,
  deleteJueyz,
  downloadJueyz,
  addJueyz,
  updateJueyz,
} from "@/api/MaintenanceRecord/jueyz";
import dayjs from "dayjs";

export default {
  name: "JueyzList",
  data() {
    return {
      loading: true,
      jueyzList: [],
      allList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchKeyword: "",
      tableColumns: [
        // 移除绝缘子ID编号、相关外键、隧道ID的列配置
        { label: "工区名称", prop: "gqname" },
        { label: "站区名称", prop: "zaname" },
        { label: "隧道名称", prop: "sdname" },
        { label: "杆号", prop: "ganhaos" },
        { label: "检修周期", prop: "cycle" },
        { label: "检查日期", prop: "mkdate", formatter: this.formatDate },
        { label: "维修前状态", prop: "beforewx" },
        { label: "维修后状态", prop: "afterwx" },
        { label: "遗留问题", prop: "remainqs" },
        { label: "检查人", prop: "checker" },
        { label: "负责人", prop: "leader" },
        { label: "操作员", prop: "oprator" },
        { label: "是否最后一次", prop: "islast" },
        { label: "备注", prop: "remark" },
      ],
      dialogVisible: false,
      isEdit: false,
      form: {
        // 移除绝缘子ID编号、相关外键、隧道ID的表单数据
        gqname: "",
        zaname: "",
        sdname: "",
        ganhaos: "",
        cycle: null,
        mkdate: "",
        beforewx: "",
        afterwx: "",
        remainqs: "",
        checker: "",
        leader: "",
        oprator: "",
        islast: null,
        remark: "",
      },
      rules: {
        // 移除相关外键的验证规则
        // 其他验证规则
      },
    };
  },
  computed: {
    filteredList() {
      if (!this.searchKeyword) return this.allList;
      const keyword = this.searchKeyword.toLowerCase();
      return this.allList.filter((item) =>
        Object.values(item).some((value) =>
          String(value).toLowerCase().includes(keyword)
        )
      );
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      selectAll()
    .then((response) => {
          this.allList = response.data;
          this.total = this.allList.length;
          this.currentPage = 1;
          this.updateJueyzList();
          this.loading = false;
        })
    .catch((error) => {
          console.error("接口请求出错:", error);
          this.loading = false;
        });
    },
    updateJueyzList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.jueyzList = this.filteredList.slice(start, end);
    },
    handleDelete(row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
    .then(() => {
          deleteJueyz(row.jyzid)
       .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.fetchData();
            })
       .catch((error) => {
              console.error("删除失败:", error);
              this.$message({
                type: "error",
                message: "删除失败",
              });
            });
        })
    .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateJueyzList();
    },
    handleDownload() {
      downloadJueyz()
    .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "绝缘子记录数据.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
    .catch((error) => {
          console.error("下载失败:", error);
        });
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    formatDate(row, column, cellValue, index) {
      return dayjs(cellValue).format("YYYY-MM-DD");
    },
    handleEdit(row) {
      this.isEdit = true;
      // 移除绝缘子ID编号、相关外键、隧道ID的表单数据
      this.form = {
        gqname: row.gqname,
        zaname: row.zaname,
        sdname: row.sdname,
        ganhaos: row.ganhaos,
        cycle: row.cycle,
        mkdate: row.mkdate,
        beforewx: row.beforewx,
        afterwx: row.afterwx,
        remainqs: row.remainqs,
        checker: row.checker,
        leader: row.leader,
        oprator: row.oprator,
        islast: row.islast,
        remark: row.remark,
      };
      this.dialogVisible = true;
    },
    handleAdd() {
      this.isEdit = false;
      // 移除绝缘子ID编号、相关外键、隧道ID的表单数据
      this.form = {
        gqname: "",
        zaname: "",
        sdname: "",
        ganhaos: "",
        cycle: null,
        mkdate: "",
        beforewx: "",
        afterwx: "",
        remainqs: "",
        checker: "",
        leader: "",
        oprator: "",
        islast: null,
        remark: "",
      };
      this.dialogVisible = true;
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 这里需要根据后端接口要求，确保更新的数据中不包含隐藏字段
            updateJueyz(this.form)
         .then(() => {
                this.$message.success("编辑成功");
                this.fetchData();
                this.dialogVisible = false;
              })
         .catch((error) => {
                console.error("编辑失败:", error);
                this.$message.error("编辑失败");
              });
          } else {
            // 这里需要根据后端接口要求，确保新增的数据中不包含隐藏字段
            addJueyz(this.form)
         .then(() => {
                this.$message.success("新增成功");
                this.fetchData();
                this.dialogVisible = false;
              })
         .catch((error) => {
                console.error("新增失败:", error);
                this.$message.error("新增失败");
              });
          }
        } else {
          this.$message.warning("请填写所有必填字段");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.custom-table {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.custom-table.el-table__header th {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: bold;
}
.custom-table.el-table__body tr {
  height: 40px;
}
.custom-table.el-table__body td {
  color: #606266;
}
.custom-download-btn {
  background-color: #67c23a;
  color: #fff;
  border: none;
  border-radius: 4px;
}
.custom-download-btn:hover {
  background-color: #85ce61;
}
.custom-search-btn,
.custom-add-btn {
  background-color: #409EFF;
  color: #fff;
  border: none;
  border-radius: 4px;
}
.custom-search-btn:hover,
.custom-add-btn:hover {
  background-color: #66b1ff;
}
.custom-input {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 5px;
  background-color: #f5f7fa;
}
.custom-input:hover,
.custom-input:focus {
  border-color: #409EFF;
}
.custom-edit-btn,
.custom-delete-btn {
  color: #409EFF;
}
.custom-edit-btn:hover,
.custom-delete-btn:hover {
  color: #66b1ff;
}
.custom-pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.custom-pagination.el-pagination button,.custom-pagination.el-pagination span {
    font-size: 14px;
    color: #606266;
  }
.custom-pagination.el-pagination.el-pager li {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin: 0 5px;
  }
.custom-pagination.el-pagination.el-pager li:hover {
    color: #409EFF;
    border-color: #409EFF;
  }
.custom-dialog {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
.custom-datepicker {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
  }
.custom-datepicker:hover,.custom-datepicker:focus {
    border-color: #409EFF;
  }
.custom-select {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 5px;
    background-color: #f5f7fa;
  }
.custom-select:hover,.custom-select:focus {
    border-color: #409EFF;
  }
.custom-cancel-btn {
    background-color: #e4e7ed;
    color: #606266;
    border: none;
    border-radius: 4px;
  }
.custom-cancel-btn:hover {
    background-color: #d1dbe5;
  }
.custom-confirm-btn {
    background-color: #409EFF;
    color: #fff;
    border: none;
    border-radius: 4px;
  }
.custom-confirm-btn:hover {
    background-color: #66b1ff;
  }
</style>